<template>
  <!--
    只有 List 在可视范围内才会检查滚动位置触发 onLoad
   -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="已显示全部评论"
    :error="error"
    error-text="加载失败，请点击重试"
    :immediate-check="false"
    @load="onLoad"
  >
    
    <comment-item  @showpost2="$emit('showpost2',$event)"  v-for="(item,index) in   list"   :key='index' :comment='item' v-model="item.is_liking" @likevent='item.is_liking=$event'></comment-item>
    <!-- <comment-item   :list='list'></comment-item> -->


  </van-list>
</template>

<script>
import  commentItem  from  './comment-item'
import { getCommentsApi } from "@/api";
export default {
  name: "",
  props: {
    source: {
        
    },
    //  文章还是评论进行回复
    type: {
      validator(value) {
        return ["a", "c"].includes(value);
      },
      default: "a"
    },

    list:{
        type:Array
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      error: false,
      commentList: [],

      offset: null,
      limit: 10
    };
  },
  created(){
      this.loading=true
      this.onLoad()
  },
  methods: {
    async onLoad() {
      const { data: res } = await getCommentsApi({
        type: this.type,
        source: this.source.toString(),
        offset: this.offset,
        limit: this.limit
      });


//  将获取的数据全部追加到  list中   list是父组件中的数组
      this.list.push(...res.data.results)

      this.loading=false;

      if(res.data.results.length){
          this.offset=res.data.last_id
      }else{
          this.finished=true
      }
    }
  },

  components:{
      commentItem
  }
};
</script>
<style lang="less" scoped></style>
